<template>
  <s-layout class="set-wrap" title="系统设置" mainBackground="#FFFFFF" :customBody="{
    backgroundColor:'#FFFFFF'
  }">
    <view class="header-box ss-flex-col ss-row-center ss-col-center">
      <image
        class="logo-img ss-m-b-46"
        :src="sheep.$url.cdn(appInfo.logo)"
        mode="aspectFit"
      ></image>
      <view class="name ss-m-b-24">{{ appInfo.name }}</view>
    </view>

    <view class="container-list">
      <uni-list :border="false">
        <uni-list-item
          title="手机号"
          :rightText="userInfo.mobile ? userInfo.mobile : '请绑定手机号'"
          showArrow
          clickable
          :border="false"
          class="list-border"
          @tap="onChangeMobile"
        ></uni-list-item>
        <uni-forms
          :model="state.model"
          :rules="state.rules"
          labelPosition="left"
          border
          class="form-box"
        >
          <!--          <view class="bg-white ss-p-x-30">-->
          <!--            <uni-forms-item name="mobile" label="手机号" @tap="onChangeMobile">-->
          <!--              <uni-easyinput-->
          <!--                v-model="userInfo.mobile"-->
          <!--                placeholder="请绑定手机号"-->
          <!--                :inputBorder="false"-->
          <!--                disabled-->
          <!--                :styles="{ disableColor: '#fff' }"-->
          <!--                :placeholderStyle="placeholderStyle"-->
          <!--                :clearable="false"-->
          <!--              >-->
          <!--                <template v-slot:right>-->
          <!--                  <view class="ss-flex ss-col-center">-->
          <!--                    <su-radio v-if="userInfo.verification?.mobile" :modelValue="true" />-->
          <!--                    <button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">-->
          <!--                      <text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx"></text>-->
          <!--                    </button>-->
          <!--                  </view>-->
          <!--                </template>-->
          <!--              </uni-easyinput>-->
          <!--            </uni-forms-item>-->
          <!--          </view>-->

          <view class="bg-white">
            <uni-list>
              <uni-list-item
                clickable
                @tap="sheep.$router.go('/pages/user/address/list')"
                title="地址管理"
                showArrow
                :border="false"
                class="list-border"
              ></uni-list-item>
              <uni-list-item
                clickable
                @tap="sheep.$router.go('/pages/user/invoice/list')"
                title="发票管理"
                showArrow
                :border="false"
                class="list-border"
              ></uni-list-item>
            </uni-list>
          </view>
        </uni-forms>
        <view v-if="sheep.$platform.name !== 'H5'">
          <view class="title-box ss-p-l-30">第三方账号绑定</view>

          <view class="account-list ss-flex ss-row-between">
            <view v-if="'WechatOfficialAccount' === sheep.$platform.name" class="ss-flex ss-col-center">
              <image
                class="list-img"
                :src="
              sheep.$url.static(
                '/assets/addons/shopro/uniapp/platform/WechatOfficialAccount.png',
              )
            "
              />
              <text class="list-name">微信公众号</text>
            </view>
            <view v-if="'WechatMiniProgram' === sheep.$platform.name" class="ss-flex ss-col-center">
              <image
                class="list-img"
                :src="
              sheep.$url.static('/assets/addons/shopro/uniapp/platform/WechatMiniProgram.png')
            "
              />
              <text class="list-name">微信小程序</text>
            </view>
            <view v-if="'App' === sheep.$platform.name" class="ss-flex ss-col-center">
              <image
                class="list-img"
                :src="sheep.$url.static('/assets/addons/shopro/uniapp/platform/wechat.png')"
              />
              <text class="list-name">微信开放平台</text>
            </view>
            <view class="ss-flex ss-col-center">
              <view class="info ss-flex ss-col-center" v-if="state.thirdOauthInfo">
                <image
                  class="avatar ss-m-r-20"
                  :src="sheep.$url.cdn(state.thirdOauthInfo.avatar)"
                ></image>
                <text class="name">{{ state.thirdOauthInfo.nickname }}</text>
              </view>
              <view class="bind-box ss-m-l-20">
                <button
                  v-if="state.thirdOauthInfo"
                  class="ss-reset-button relieve-btn"
                  @tap="unBindThirdOauth"
                >
                  已绑定
                </button>
                <button v-else class="ss-reset-button bind-btn" @tap="bindThirdOauth">未绑定</button>
              </view>
            </view>
          </view>
        </view>
        <uni-list-item
          title="当前版本"
          :rightText="mp_code"
          showArrow
          clickable
          :border="false"
          class="list-border"
          @tap="onCheckUpdate"
        ></uni-list-item>
        <uni-list-item
          title="本地缓存"
          :rightText="storageSize"
          showArrow
          :border="false"
          class="list-border"
        ></uni-list-item>
        <uni-list-item
          title="意见反馈"
          showArrow
          clickable
          :border="false"
          class="list-border"
          @tap="sheep.$router.go('/pages/public/feedback')"
        ></uni-list-item>
        <uni-list-item
          title="关于我们"
          showArrow
          clickable
          :border="false"
          class="list-border"
          @tap="
            sheep.$router.go('/pages/public/richtext', {
              id: appInfo.about_us.id,
              title: appInfo.about_us.title,
            })
          "
        ></uni-list-item>
        <!-- 为了过审 只有iOS-App有注销账号功能 -->
        <!-- #ifdef APP-PLUS -->
        <uni-list-item
          v-if="isLogin"
          title="注销账号"
          rightText=""
          showArrow
          clickable
          :border="false"
          class="list-border"
          @click="onLogoff"
        ></uni-list-item>
        <!-- #endif -->
      </uni-list>
    </view>

    <view class="set-footer ss-flex-col ss-row-center ss-col-center">
      <view class="agreement-box ss-flex ss-col-center ss-m-b-40">
        <view class="ss-flex ss-col-center ss-m-b-10">
          <view
            class="tcp-text"
            @tap="
              sheep.$router.go('/pages/public/richtext', {
                id: appInfo.user_protocol.id,
                title: appInfo.user_protocol.title,
              })
            "
          >
            《{{ appInfo.user_protocol.title }}》
          </view>
          <view class="agreement-text">与</view>
          <view
            class="tcp-text"
            @tap="
              sheep.$router.go('/pages/public/richtext', {
                id: appInfo.privacy_protocol.id,
                title: appInfo.privacy_protocol.title,
              })
            "
          >
            《{{ appInfo.privacy_protocol.title }}》
          </view>
        </view>
      </view>
      <view class="copyright-text ss-m-b-10">{{ appInfo.copyright }}</view>
      <view class="copyright-text">{{ appInfo.copytime }}</view>
    </view>
    <view class="hW_280"></view>
    <view class="bg_FFFFFF wh_750 hW_280" style="position: fixed;bottom: 0;left: 50%;transform: translate(-50%,0)">
      <view class="ss-p-x-20 mt_30">
        <button
          class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main"
          @tap="changeLogin"
          v-if="isLogin"
        >
          切换登录
        </button>
      </view>
      <view class="ss-p-x-20 ss-p-b-40 mt_30">
        <button
          class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main"
          @tap="onLogout"
          v-if="isLogin"
        >
          退出登录
        </button>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, reactive } from 'vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import { clone } from 'lodash';

  const appInfo = computed(() => sheep.$store('app').info);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const storageSize = uni.getStorageInfoSync().currentSize + 'Kb';
  const appVersion = computed(() => sheep.$store('app').info.worship_version);
  const mp_code = computed(() => sheep.$store('AI').mp_code);
  const state = reactive({
    showModal: false,
    model: {},
    rules: {},
    thirdOauthInfo: null,
  });

  const userInfo = computed(() => sheep.$store('user').userInfo);
  const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';

  function onCheckUpdate() {
    sheep.$platform.checkUpdate();
    // 小程序初始化时已检查更新
    // H5实时更新无需检查
    // App 1.跳转应用市场更新 2.手动热更新 3.整包更新
  }

  function onLogoff() {
    uni.showModal({
      title: '提示',
      content: '确认注销账号？',
      success: async function(res) {
        if (res.confirm) {
          const { code } = await sheep.$api.user.logoffUser();
          if (code === 1) {
            sheep.$store('user').logout();
            await sheep.$store('AI').resetSessionList();
            await sheep.$store('family').setFamilyTree();
            uni.$emit('settingMode');
            uni.switchTab({
              url: '/pages/message/genealogy',
            });
          }
        }
      },
    });
  }

  function onLogout() {
    uni.showModal({
      title: '提示',
      content: '确认退出账号？',
      success: async function(res) {
        if (res.confirm) {
          const result = await sheep.$store('user').logout();
          if (result) {
            await sheep.$store('AI').resetSessionList();
            await sheep.$store('family').setFamilyTree();
            await sheep.$store('family').setList();
            uni.removeStorageSync('account-list')
            uni.$emit('settingMode');
            uni.switchTab({
              url: '/pages/message/genealogy',
            });
          }
        }
      },
    });
  }

  function changeLogin(){
    sheep.$router.go('/pages/user/account')
  }

  // 修改手机号
  const onChangeMobile = () => {
    showAuthModal('changeMobile');
  };

  // 绑定第三方账号
  async function bindThirdOauth() {
    let result = await sheep.$platform.useProvider('wechat').bind();
    if (result) {
      getUserInfo();
    }
  }


  const getUserInfo = async () => {
    const userInfo = await sheep.$store('user').getInfo();
    state.model = clone(userInfo);

    if (sheep.$platform.name !== 'H5') {
      let { data, code } = await sheep.$api.user.thirdOauthInfo();
      if (code === 1) {
        state.thirdOauthInfo = data;
      }
    }
  };

  // 解绑第三方账号
  function unBindThirdOauth() {
    uni.showModal({
      title: '解绑提醒',
      content: '解绑后您将无法通过微信登录此账号',
      cancelText: '再想想',
      confirmText: '确定',
      success: async function(res) {
        if (res.confirm) {
          const result = await sheep.$platform.useProvider('wechat').unbind();
          if (result) {
            getUserInfo();
          }
        }
      },
    });
  }
</script>

<style lang="scss" scoped>
  .container-list {
    width: 100%;
  }

  .set-title {
    margin: 0 30rpx;
  }

  .header-box {
    padding: 100rpx 0;

    .logo-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
    }

    .name {
      font-size: 42rpx;
      font-weight: 400;
      color: $dark-3;
    }

    .version {
      font-size: 32rpx;
      font-weight: 500;
      line-height: 32rpx;
      color: $gray-b;
    }
  }

  .set-footer {
    margin: 100rpx 0 0 0;

    .copyright-text {
      font-size: 22rpx;
      font-weight: 500;
      color: $gray-c;
      line-height: 30rpx;
    }

    .agreement-box {
      font-size: 26rpx;
      font-weight: 500;

      .tcp-text {
        color: var(--ui-BG-Main);
      }

      .agreement-text {
        color: $dark-9;
      }
    }
  }

  .loginout-btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
  }

  .list-border {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    border-bottom: 2rpx solid #eeeeee;
  }

  :deep(.uni-list-item__content-title) {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
  }

  :deep(.uni-list-item__extra-text) {
    color: #bbbbbb;
    font-size: 28rpx;
  }

  :deep(.uni-forms-item--border) {
    padding: 0 0;
  }

  .title-box {
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    line-height: 100rpx;
  }

  .account-list {
    background-color: $white;
    height: 100rpx;
    padding: 0 20rpx;

    .list-img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .list-name {
      font-size: 28rpx;
      color: #333333;
    }

    .info {
      .avatar {
        width: 38rpx;
        height: 38rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .name {
        font-size: 28rpx;
        font-weight: 400;
        color: $dark-9;
      }
    }

    .bind-box {
      width: 100rpx;
      height: 50rpx;
      line-height: normal;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;

      .bind-btn {
        width: 100%;
        height: 100%;
        border-radius: 25rpx;
        background: #f4f4f4;
        color: #999999;
      }

      .relieve-btn {
        width: 100%;
        height: 100%;
        border-radius: 25rpx;
        background: var(--ui-BG-Main-opacity-1);
        color: var(--ui-BG-Main);
      }
    }
  }
</style>
